/**
 * Resize Observer API 提供了一种机制，让代码可以监控元素尺寸的变化，
 * 并且在每次变化时，发送一个通知给观察者。
 * 
 * 执行性能远超传统事件监控模式
 */

// 场景1
const resizeObserver = new ResizeObserver(entries => {
  for(let entry of entries) {
    // console.log(entry);
    if (entry.contentBoxSize[0]) {
      entry.target.style.borderRadius = Math.min(
        100,
        (entry.contentBoxSize[0].inlineSize / 10) + (entry.contentBoxSize[0].blockSize/ 10)
      ) + 'px';
    } else {
      entry.target.style.borderRadius = Math.min(100,
        (entry.contentRect[0].width/10) + (entry.contentRect[0].height/10)
      ) + 'px';
    }
    
    console.log(entry.target.style.borderRadius);
  }
})
resizeObserver.observe(document.getElementById('resizeObserver1'));

// 场景2
if (window.ResizeObserver) {
  const h1Ele = document.querySelector('h1');
  const pEle = document.querySelector('p');
  const divEle = document.querySelector('#resizeObserver2');
  const slider = document.querySelector('input[type="range"]');
  const checkbox = document.querySelector('input[type="checkbox"]');

  divEle.style.width = '600px';
  slider.addEventListener('input', () => divEle.style.width = slider.value + 'px');

  // 初始化一个 resizeObserver 对象
  const resizeObserver = new ResizeObserver((entries) => {
    for(let entry of entries) {
      if (entry.contentBoxSize) {
        // chrome 下的contentBoxSize是一个模拟数组
        if (entry.contentBoxSize[0]) {
          h1Ele.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + 'rem';
          pEle.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + 'rem';
        } else {
          h1Ele.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize / 200) + 'rem';
          pEle.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize / 600) + 'rem';
        }
      } else {
        h1Ele.style.fontSize = Math.max(1.5, entry.contentRect.width / 200) + 'rem';
        pEle.style.fontSize = Math.max(1, entry.contentRect.width / 600) + 'rem';
      }
    }
    console.log(h1Ele.style.fontSize,
      pEle.style.fontSize)
  });

  resizeObserver.observe(divEle); // 监听 divEle 元素尺寸变化

  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      resizeObserver.observe(divEle); // 重新监听 divEle 
    } else {
      resizeObserver.unobserve(divEle); // 清空 resizeObjserver 下对 divEle 监听
    }
  })
} else {
  console.error('浏览器不支持 ResizeObserver');
}